*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: linear-gradient(100deg,red,blue);
  padding:0.833rem 1.667rem;
  height: 30rem;
}
ul li {
  list-style: none;
}
.box{
  display: flex;
  height: 100%;
  .left{
    flex: 3;
    .top{
      display: flex;
      margin-top: 2rem;
      span {
        font-size: 1rem;
        padding:  0.208rem 0.208rem;
      }
      input {
        width: 8.333rem;
        height: 1.667rem;
        border-radius: 0.208rem;
        border: none;
        outline: none;
        padding-left: 0.208rem;
        font-size: 0.833rem;
      }
      button{
        height: 1.667rem;
        width: 3.33rem;
        font-size: .833rem;
        border-radius: 0.208rem;
        border: none;
        outline: none;
        background-color: #0e7cb3;
      }
    }
    table{
      margin-top: 0.833rem;
      width: 35.417rem;
      border: 1px solid #fff;
      border-spacing: 0;
      border-radius: 0.208rem;
      tr {
        height: 1.667rem;
        text-align: center;
        th {
          background:linear-gradient(100deg,#5da3a9,#5da3a9);
          text-align: center;
        }
        th,
        td{
          border-bottom: 1px solid #fff;
          border-right: 1px solid #fff;
        }

      }
    }
  };
  .right{
    flex: 2;
    .top{
      height: 50%;
    }
    .bottom{
      height: 50%;
    }
  }
}



